<template>
  <!-- 插值使用示例 -->
  <div>
    <!-- 插值展示 -->
    <p>{{ name }}</p>
    <!-- JS表达式 -->
    <p>{{ gender === 1 ? '男' : '女' }}</p>
    <!-- 直接插值展示html内容 -->
    <p>{{ htmlContent }}</p>
    <!-- v-html 标示 -->
    <p v-html="htmlContent"></p>
    <!-- v-bind 完整用法 -->
    <p v-bind:id="dynamicId">当前dom的id是: {{ dynamicId }}</p>
    <!-- v-bind 缩写方式 -->
    <p :id="dynamicId">当前dom的id是: {{ dynamicId }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicId: 'random-' + new Date().getTime(),
      name: '小王',
      gender: 1, // 1 男性 2 女性
      htmlContent: '<b>这是段html内容</b>',
    };
  }
}
</script>

<style>

</style>